<template>
    <div class="header">
        <div class="headerLeft">
            <div class="title" >
                <img src="/logo.png" style="height: 2rem;margin-left: 5px;">
                <span style="font-size: 21.5px;font-weight: 700;margin-left: 6px;white-space: nowrap;">班前培训系统</span>
            </div>
            <div class="menuControl">
                <el-icon
                    v-if="props.isCollapse"
                    size="22"
                    style="cursor: pointer;"
                    @click="$emit('toggleCollapse', false)"
                    ><Expand /></el-icon>
                <el-icon
                    v-if="!props.isCollapse"
                    size="22"
                    style="cursor: pointer;"
                    @click="$emit('toggleCollapse', true)"
                    ><Fold /></el-icon>
                
                
            </div>
            <div v-if="!isMobile" class="breadMenu">
                <el-breadcrumb :separator-icon="ArrowRight">
                    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                    <el-breadcrumb-item>promotion management</el-breadcrumb-item>
                    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                    <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        
        <div class="headerRight">
            <div class="notice">
                <el-popover placement="bottom" :width="250" trigger="click">
                    <template #reference>
                        <el-badge :value="12" class="item">
                            <el-icon style="cursor: pointer;" size="22" @click="showNotice"><ChatDotRound /></el-icon>
                        </el-badge>
                    </template>
                    <el-tabs v-model="activeName" class="notice-tabs" @tab-click="handleClick">
                        <el-tab-pane label="通知" name="first">User</el-tab-pane>
                        <el-tab-pane label="待办" name="second">Config</el-tab-pane>
                    </el-tabs>
                </el-popover>
                <el-popover placement="bottom" width="100" trigger="click" :popper-style="{minWidth:'20px',padding:'0px'}" >
                    <template #reference>
                        <div style="display: flex;align-items: center;cursor: pointer;">
                            <span style="font-size: 14px;margin-left: 15px;">{{user.realName}}</span>
                            <el-avatar style="margin-left: 5px;" :size="22" :src="user.avatar" />
                        </div>
                        
                    </template>
                    <div style="display: flex;align-items: center;flex-direction: column;">
                        <el-button type="text" @click="logout">退出登录</el-button>
                        <el-button type="text" style="margin-left: 0px;">折叠菜单</el-button>
                    </div>
                    
                </el-popover>
            </div>
        </div>
        
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/user'
import { Expand, Fold, ArrowRight, ChatDotRound  } from '@element-plus/icons-vue';
import router from '@/router';

let props = defineProps({
    isCollapse: {
        type: Boolean,
        default: false
    },
    isMobile: {
        type: Boolean,
        default: false
    },
    AvatarUrl:{
        type: String,
        default: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
    }
})
let userInfo = localStorage.getItem('userInfo');
let user = ref(userInfo ? JSON.parse(userInfo) : {});
console.log(user.value)

const logout = () => {
    localStorage.removeItem('userInfo');
    localStorage.removeItem('menus');
    const userStore = useUserStore();
    userStore.setUserInfo({});
    router.push('/login');
}

</script>

<style lang="less">
.header{
    // border-bottom: 1px solid;
    width: 100%;
    height: 99%;
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: white;
    justify-content: space-between;
    border-bottom: 1px solid #e4e7ed;
    .headerLeft{
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .title{
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background-color: white;
            // border-right: 1px solid #e4e7ed;
            // border-bottom: 1px solid;
        }
        .menuControl{
            margin-left: 2vw;
        }
        .breadMenu{
            margin-left: 2vw;
        }
    }
    .headerRight{
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .notice{
            color:black;
            margin-right: 20px;
            display: flex;
            align-items: center;
            
        }
    }
    
}
.notice-tabs{
    color: #6b778c;
    font-size: 1rem;
    font-weight: 600;
}

</style>